<template>
  <div class="main">
    <BtnCmp :disabled="true" ref="testBtn" :loading="true">
      <template #icon>
        <img src="/success.png" width="20" height="20" />
      </template>
      按钮
      <template #loading>
        <img
          src="https://img.zcool.cn/community/0140455ca45929a801208f8b1ec300.gif"
          width="20"
          height="20"
        />
      </template>
    </BtnCmp>

    <BtnCmp size="large" type="warning" :plain="true"> 按钮 </BtnCmp>
    <BtnCmp size="small" type="text"> 按钮 </BtnCmp>
  </div>
  <div style="width: 300px; margin-left: 20px">
    <InpCmp
      v-model="wenben"
      @input="
        () => {
          console.log(wenben);
        }
      "
    >
      <template #icon>
        <img src="/success.png" width="20" height="20" />
      </template>
    </InpCmp>
    {{ wenben }}
  </div>
  <div>
    <CardTest title="123456789" />
    <CardTest>
      <template #title> 另外一种方法 </template>
    </CardTest>
  </div>
</template>
<script setup>
import BtnCmp from "../components/Button.vue";
import InpCmp from "../components/TextInput.vue";
import CardTest from "../components/test.vue";
import { ref, onMounted } from "vue";
const testBtn = ref(null);
const wenben = ref("");
console.log(testBtn.value, 20);
onMounted(() => {
  console.log(testBtn.value, 22);
});
</script>
<style scoped>
.main {
  display: flex;
  gap: 10px;
}
</style>
